<template>
<div class="ChangePassword">
    <div class="breadcrumb">个人中心-修改密码</div>
    <div class="Password_Box">
            <el-form ref="form" :model="userInfo" label-width="100px" class="userform">
                <el-form-item label="账号：">
                    <span style="margin-left:18px ">{{this.userInfo.name}}</span>
                </el-form-item>
                <el-form-item label="旧密码：">
                    <el-input show-password  placeholder="请输入" v-model="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码：">
                    <el-input show-password placeholder="请输入" v-model="newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码：">
                    <el-input show-password  placeholder="请输入" v-model="verPassword"></el-input>
                </el-form-item>
                <el-button class="lbtn" @click="doSave">确认修改</el-button>
            </el-form>
        </div>
    <!-- <div class="Password_Box">
        <div class="lcontent">
            <div>
                <span>账号</span>
                <span>{{this.userInfo.name}}</span>
            </div>
        </div>
    </div> -->
</div>
</template>

<script>
    export default {
        name: "ChangePassword",
        data(){
            return{
                userInfo:{
                    // name:'12345'
                },
                password:'',
                newPassword:'',
                verPassword:''
            }
        },
        methods:{
            check(){
                if (this.password==''){
                    this.$message.error('旧密码不能为空')
                    return false
                }else if(this.newPassword==''){
                    this.$message.error('新密码不能为空')
                    return false
                }else if (this.verPassword==''){
                    this.$message.error('确认新密码不能为空')
                    return false
                }else if (this.newPassword!=this.verPassword){
                    this.$message.error('密码确认要与新密码一致')
                    return  false
                }
                return true;
            },
            doSave(){
                 if(this.check()){
                    this.lAxios({
                        method: "post", //方法
                        url: "/platform/changePassword.do", //路径，基础路径在main.js里面配置
                        params: {
                            //传参
                            password: this.password,
                            newPassword: this.newPassword
                        }
                    }) .then(res => {
                        //成功的回调函数
                        console.log(res)
                        if(res==undefined){
                            this.$message.error('修改异常');
                        }else{
                            if(res.data.status==0){
                                this.$message.success('修改成功');
                                this.password = "";
                                this.newPassword = "";
                                this.verPassword = "";
                            }
                        }
                    })
                }
            },init(){
                this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style lang="scss">
.ChangePassword{
    width: 100%;
    height: 100%;
    background-color: white;
    .breadcrumb{
        padding: 10px;
        font-size: 14px;
        color: #333;
        background-color: #F7F9FC;
        background-clip: border-box;
    }
    .Password_Box { 
        .userform{
            width: 400px;
            margin: 100px auto;
            // .formupload{
            //     color: #37f;
            //     margin-left: 10px;
            // }
            .lbtn{
                margin: 20px auto;
                margin-left: 120px;
                width: 140px;
                height: 50px;
                background-color: #37f;
                border: none;
                color: #fff;
                font-size: 20px;
            }
        }
    }
}
</style>
